<template>
    <el-card :class="config.attributes?.cssClass" class="card-container" v-show="!config.attributes.hidden" :header="config.attributes.headerTitle"
        :shadow="config.attributes.cardShadow">
        <div class="card-draggable">
            <component v-for="child in config.children" :key="child.id" :is="designer.renderComponent(child)"
                :config="child" />
        </div>
    </el-card>
</template>

<script setup>
import { inject } from 'vue'
import { ElCard } from 'element-plus'

const designer = inject('designer')

defineProps({
    config: {
        type: Object,
        required: true
    }
})
</script>

<style scoped>
.card-container {
    margin: 5px 0;
}

.card-draggable {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
</style>